<template>
  <div class="layout-all">
    <div v-if="oss_status==='1'">
      <control :config="config" />
      <div class="layout-header" style="float: right">
        
        <upload-video @uploadDone="uploadDone"></upload-video>
      </div>
      <div class="layout-content">
        <el-table
          :data="tableData"
          stripe
          align="center"
          highlight-current-row
          style="width: 100%; margin-top: 50px"
        >
          <el-table-column align="center" prop="name" label="视频名称" width="200"/>
          <el-table-column align="center"  prop="size" label="视频大小" >
            <template slot-scope="scope">
              <span>{{handleSize(scope.row.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="time" label="视频时长" width="100"/>
          <el-table-column align="center"  prop="url" label="视频地址" minWidth="300"/>
          <el-table-column align="center" prop="create_time" label="上传时间" width="160"/>
          <el-table-column
            align="center"
            prop="telephone"
            :fixed="isMobile()?undefined:'right'"
            label="操作"
            width="160"
          >
            <template slot-scope="scope">
              <el-button size="small" type="success" icon="el-icon-check" @click="selectVideo(scope.row)"/>
              <el-button
                type="danger"
                size="small"
                icon="el-icon-delete"
                @click="onDel(scope.row.id)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :current-page="current_page"
        :page-size="per_page"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-if="oss_status==='0'" class="notice">请先申请OSS</div>
  </div>
</template>

<script>
import control from "../../components/control/control";
import UploadVideo from "./video_upload";
export default {
  components: { control, UploadVideo },
  data() {
    return {
      oss_status:'',
      config: [
        {
          type: "text",
          placeholder: "请输入视频名称",
          field: "name",
          val: "",
        },
      ],
      value: "",
      searchWhere: {
        title: "",
      },
      tableData: [],
      cate: [],
      total: 0,
      current_page: 1,
      per_page: 14,
    };
  },
  mounted() {
    this.get("/admin/Config/get_oss", {}, "POST").then((e) => {
      console.log(e)
      this.oss_status = e.oss_status
     
    });
    this.onSearch();
  },
  methods: {
    //选择视频
    selectVideo (item) {
      this.$msg_ok("success", "选择成功");
      this.$emit('selectVideo',item)
    },
    //上传回调
    uploadDone (uploadRes) {
      console.log(uploadRes)
      this.get("/admin/Video/video_lib_save", uploadRes, "POST").then((e) => {
        this.tableData = e.list.data;
        this.per_page = e.list.per_page;
        this.total = e.list.total;
        this.current_page = e.list.current_page;
      });
    },
    // 查询
    handleSizeChange(val) {
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.current_page = val;
      this.onSearch();
    },
    onSearch() {
      const form = {};
      form.page = this.current_page;
      form.map = this.searchWhere;
      this.get("/admin/Video/video_lib", form, "POST").then((e) => {
        this.tableData = e.list.data;
        this.per_page = e.list.per_page;
        this.total = e.list.total;
        this.current_page = e.list.current_page;
        console.log(this.tableData);
      });
    },
    //处理大小
    handleSize (size) {
      return (size / 1000000).toFixed(2)+'MB'
    },
    // 添加
    onAdd() {},
    // 编辑
    onEdit(id) {
      console.log(id);
    },
    // 修改状态
    change_status(id, field, val) {
      this.update(id, val, field, "Video").then((e) => {
        e ? this.onSearch() : "";
      });
    },
    // 删除
    onDel(id) {
      this.$msg_confirm().then((e) => {
        if (e) {
          this.get("/admin/Video/video_lib_del", {id:id}, "POST").then((e) => {
            this.onSearch();
          });
        }
      });
    },
  },
};
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
.notice {
  text-align: center;
  color:red;
  font-size:24px;
}
</style>>
